<style scoped>
/*定义要拖拽元素的样式*/
table.itxst {
  color: #333333;
  border: #ddd solid 1px;
  border-collapse: collapse;
}

table.itxst th {
  border: #ddd solid 1px;
  padding: 8px;
  background-color: #dedede;
}

table.itxst td {
  border: #ddd solid 1px;
  padding: 8px;
  background-color: #ffffff;
}

table.itxst tr {
  cursor: pointer;
}

table.itxst td.move:hover {
  cursor: move;
}
</style>
<template>
  <div>
<!--    <div style="padding:10px">-->
<!--      &lt;!&ndash;使用draggable组件&ndash;&gt;-->
<!--      <div>点击第一列数字进行拖动，其他列拖拽无效</div>-->
<!--      <table class="itxst">-->
<!--        <draggable animation="500" force-fallback="true" handle=".move" @start="onStart" @end="onEnd" :move="checkMove">-->
<!--          <tr v-for="item in list" :key="item.id">-->
<!--            <td style="width:50px" class="move">{{ item.id }}</td>-->
<!--            <td style="width:250px">{{ item.name }}</td>-->
<!--          </tr>-->
<!--        </draggable>-->
<!--      </table>-->
<!--    </div>-->
    <Button @click="getSelectedNode">获取已选中节点</Button>
    <h3 class="tree-demo-title-h3">节点的样式</h3>
    <p>可自行设置节点的默认样式和选中的样式</p>
    <BaseCard>
      <template v-slot:header>
        <div class="component-wrapper">
          <!--          <draggable animation="500"  force-fallback="true"  handle=".org-chart-node-label"  @start="onStart" @end="onEnd" :move="checkMove">-->
          <vue-org-tree
              ref="menuTree"
              :data="testData"
              node-key="id"
              direction="horizontal"
              show-collapsable
              default-expand-all
              :label-class-name="renderLabelClass"
              :current-label-class-name="renderCurrentClass"
              :ellipsis="false"
              :ellipsis-length="10"
              :draggable="true"
              :multiple="true"
              @on-drag-drop="handleDragDrop"
              @node-click="handleNodeClick"
              :loading="loading"
              :relation="true"
              @relation-node-click="handleRelationNodeClick"
              @on-relation-count="handleRelationCountClick"
          ></vue-org-tree>
          <!--          </draggable>-->
        </div>
      </template>
      <template v-slot:description>
        通过
        <code>label-class-name</code> 设置节点的样式，支持字符和函数方式。通过
        <code>current-label-class-name</code>
        设置当前节点选中的样式，支持字符和函数方式。
      </template>
      <template>
        <pre
            class="language-css"
            v-html="Prism.highlight(content, Prism.languages.html, 'html')"
        ></pre>
      </template>
    </BaseCard>
  </div>
</template>
<script>
import mixins from "./mixins";
import draggable from 'vuedraggable'

export default {
  mixins: [mixins],
  components: {
    draggable
  },
  data() {
    return {
      drag: false,
      loading: false,
      //定义要被拖拽对象的数组
      list: [
        {id: 1, name: 'www.itxst.com'},
        {id: 2, name: 'www.jd.com'},
        {id: 3, name: 'www.ebay.com'},
      ],
      content: `<vue-org-tree
  :data="testData"
  direction="horizontal"
  show-collapsable
  default-expand-all
  :label-class-name="renderLabelClass"
  :current-label-class-name="renderCurrentClass"
  /> \n
<script>
  export default {
    data () {
      return {
        testData: [{
          label: 'xxx科技有有限公司',
          children: [{
            label: '产品研发部',
            children: [{
              label: '研发-前端',
            }, {
              label: '研发-后端',
            }, {
              label: 'UI 设计',
            }]
          }, {
            label: '销售部',
            children: [{
                label: '销售一部',
              },{
                label: '销售二部',
              }
            ]
          },{
            label: '财务部'
          }]
        }]
      }
    },
    methods: {
      renderLabelClass (node) {
        return 'label-class-blue'
      },
      renderCurrentClass (node) {
        return 'label-bg-blue'
      }
    }
  }
<\/script>
<style>
.label-class-blue{
  color: #595961;
}
.label-bg-blue{
  background: #1989fa;
  color: #fff;
}
</style>
`
    };
  },
  methods: {
    handleRelationCountClick(dataInfo) {
      this.$Message.success("222")
    },
    handleRelationNodeClick(dataInfo, node, currentNode) {
      this.$Message.success("111")
    },
    handleNodeClick(dataInfo, node, currentNode) {
      // let selected = dataInfo.selected
      // this.$set(dataInfo, 'selected', !selected)
      // this.setChildrenCurrent(node.childNodes, !selected)
      // this.setParentCurrent(node.parent)
      // node.isCurrent = !selected
      // node.data.selected = !selected
      let dataList = this.testData
      console.log(dataInfo, 'dataInfo')
      // console.log(node, 'node')
      // console.log(dataList, 'dataList')
      // this.$refs.menuTree.getSelectedNode(dataList)
    },
    getSelectedNode() {
      let treeList = this.testData
      let data = this.$refs.menuTree.getSelectedNode(treeList)
      console.log(data, '---------selectedData-----------')
      alert(JSON.stringify(data))
    },
    renderLabelClass (node) {
      let className = 'label-class-blue'
      // if (node.data.selected === true) {
      //   className = 'label-bg-blue'
      // }
      return className
    },
    renderCurrentClass(node) {
      // node.parent.isCurrent = true
      // if (node.parent.parent !== null && node.parent.data.level !== 0) {
      //   node.parent.data.selected = true
      // }
      return "label-bg-blue";
    },
    checkMove(evt) {
      console.log(evt)
      return true;
    },
    //开始拖拽事件
    onStart() {
      this.drag = true;
    },
    //拖拽结束事件
    onEnd() {
      this.drag = false;
    },
    handleDragDrop(dragged, related) {
      console.log(dragged, 'dragged')
      console.log(related, 'related')
    },
  }
};
</script>

<style>
.label-class-blue {
  color: #595961;
}

.label-bg-blue {
  background: #1989fa;
  color: #fff;
}
</style>
